<template>
	<view>
		<view class="page">
			<searchBox></searchBox>
			<banner :bannerList="bannerList"></banner>
			<grid></grid>
			<notice></notice>
			
			<view class="looking">
				<view class="left">
					<view class="item custom">
						<text class="title">定制找房</text>
						<text class="text">只需要填写简单要求，平台经纪人即可为您找到理想居所</text>
						<view class="btn">点击开始找房</view>
					</view>
				</view>
				<view class="right">
					<view class="item village">
						<text class="title">热门小区</text>
						<text class="text">浏览热门小区</text>
					</view>
					<view class="item map">
						<text class="title">地图找房</text>
						<text class="text">点击开始找房</text>
					</view>
				</view>
			</view>
			
			<broker></broker>
			<recommend title="新房"></recommend>
			<recommend title="二手房"></recommend>
			<recommend title="租房"></recommend>
			<recommend title="商铺"></recommend>
			
			<bottom type="house" :tabIndex="0"></bottom>
		</view>
	</view>
</template>

<script setup lang="ts">
	import searchBox from '@/components/house/tabbar/index/searchBox/search-box.vue';
	import banner from '@/components/house/tabbar/index/banner/banner.vue';
	import grid from '@/components/house/tabbar/index/grid/grid.vue';
	import notice from '@/components/house/tabbar/index/notice/notice.vue';
	import broker from '@/components/house/tabbar/index/broker/broker.vue';
	import recommend from '@/components/house/tabbar/index/recommend/recommend.vue';
	import bottom from '@/components/footer/footer.vue';
	import { onLoad } from '@dcloudio/uni-app';
	import { ref } from 'vue';
	const bannerList = ref(['https://img0.baidu.com/it/u=2022043590,1237511079&fm=253&fmt=auto&app=120&f=JPEG?w=889&h=500',
							'https://img0.baidu.com/it/u=3001422767,55637664&fm=253&fmt=auto&app=120&f=JPEG?w=1200&h=791',
							'https://img0.baidu.com/it/u=1385079478,4019721997&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500']);
	onLoad(() => {
		console.log('onLoad')
	})
</script>

<style lang="scss">
	.page{
		padding: 0 mp-sizing(10);
	}
	.looking{
		width: 100%;
		height: mp-sizing(160);
		display: flex;
		flex-flow: row nowrap;
		justify-content: space-between;
		.left{
			width: 48%;
			height: 100%;
			.item{
				width: 100%;
				height: 100%;
				background-color: $uni-bg-color-grey;
				box-sizing: border-box;
				padding: mp-sizing(10);
				display: flex;
				flex-flow: column wrap;
				justify-content: space-around;
				.title{
					font-weight: 600;
				}
				.text{
					color: $uni-text-color-grey;
				}
				.btn{
					width: mp-sizing(100);
					text-align: center;
					margin: 0;
					background-color: $uni-color-primary;
					padding: mp-sizing(5);
					color: $uni-text-color-inverse;
					font-size: mp-sizing(14);
				}
			}
		}
		.right{
			width: 48%;
			display: flex;
			flex-flow: column;
			justify-content: space-between;
			.item{
				background-color: $uni-bg-color-grey;
				box-sizing: border-box;
				padding: mp-sizing(10);
				display: flex;
				flex-flow: column wrap;
				justify-content: space-around;
				.title{
					font-weight: 600;
				}
				.text{
					color: $uni-text-color-grey;
				}
			}
			.village,.map{
				height: 48%;
				width: 100%;
			}
		}
	}
</style>